<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动物家宠物医院</title>
    <link rel="shortcut icon" href="f.png" type="image/x-icon">
    <!-- 引入高德地图依赖文件 -->
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <link rel="stylesheet" href="bootstrap-5/css/bootstrap.min.css">
    <script src="webfiles/public/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <header class=" fixed-top">
        <nav class="nav-div">
            <div class="logo-div">
                <img src="webfiles/public/pic/logo-h-w.png" class="logo">
            </div>
            <ul class="nav justify-content-end nav-top">
                <li class="nav-item">
                    <a class="nav-link" href="#home">主页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#services">服务</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#ystd">医生团队</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#about">关于我们</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#map">地理位置</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#contact">联系我们</a>
                </li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="home">
            <div class="home-content">
                <h1 class="h-one">动 物 家 宠 物 医 院</h1>
                <br>
                <p class="lead tip-one">您 宠 物 的 健 康 是 我 们 的 首 要 任 务</p>
                <button type="button" class="btn btn-primary login-btn"><a href="webfiles/user/user_login.html">登录获得完整服务</a></button>
            </div>
        </section>
        <section id="services">
            <h2 class="h-two">我 们 的 服 务</h2>
            <div class="service">
                <h3 class="h-thr">宠 物 健 康 检 查</h3>
                <p class="lead tip-two">我们提供定期检查，以确保您宠物的健康</p>
                <img src="img/cwjkjc.jpg">
            </div>
            <div class="service">
                <h3 class="h-thr">宠 物 疫 苗 接 种</h3>
                <p class="lead tip-two">通过我们的一系列疫苗接种来保护您的宠物</p>
                <img src="img/jzym.jpg">
            </div>
            <div class="service" id="ystd">
                <h3 class="h-thr">专业医师团队</h3>
                <p class="lead tip-two">我们拥有经验丰富的宠物医生为宠物进行各种治疗</p>
                <img src="img/zytd.jpg">
            </div>
        </section>
        <section id="about">
            <h2 class="h-two">关 于 我 们</h2>
            <p class="lead tip-two">动物家宠物医院是一家领先的兽医诊所，致力于为您的宠物提供卓越的护理和医疗救助</p>
            <p class="lead tip-two">我们技术娴熟的兽医和工作人员团队致力于让您的宠物保持健康和快乐</p>
            <p class="lead tip-two">我们的兽医团队致力于为您和您的宠物提供最佳的医疗服务</p>
            </p>
            <h2 class="h-two" id="map">地 图 导 航</h2>
            <p class="lead tip-two">地址：XX市XX区XXX街道XXX号</p>
            <div class="map-show" id="map_div">
                <!-- 加载地图JSAPI脚本 -->
                <script src="https://webapi.amap.com/maps?v=2.0&key=72ccbfd5a54fbd22c896534eb2907fd9"></script>
                <script>
                    var map = new AMap.Map('map_div', {
                        viewMode: '2D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D'
                        zoom: 17, // 初始化地图层级
                        center: [112.482749,32.975426] // 初始化地图中心点
                    });
                </script>
            </div>
            <h2 class="h-two" id="contact">联 系 我 们</h2>
            <p class="lead tip-two">如果您想<b>享有方便的宠物医院服务</b>，请您 <a href="webfiles/user/user_login.html"><b>登录</b></a></p>
            <p class="lead tip-two">如果您有<b>任何疑问或需要</b>，请随时联系我们</p>
            <p class="lead tip-two">联系方式：123-456-7890</p>
            <p class="lead tip-two">邮箱：animalhomepethospital@pet110.com</p>
            <p class="lead tip-two">营业时间：周一至周日 9:00-17:00 （节假日正常营业）</p>
        </section>
    </main>
    <footer>
        <p>&copy; 2025 ANIMAL HOME PET HOSPITAL. All rights reserved.</p>
    </footer>
</body>

</html>